<template>
        <span id="edit">
            <el-button size="medium" type="plain"    @click="isShowBox = true">编辑</el-button>
            <el-drawer
                    title="菜品信息编辑区域"
                    :before-close="handleClose"
                    :visible.sync="isShowBox"
                    direction="rtl"
                    :with-header="false"
                    custom-class="demo-drawer"
                    ref="drawer"
                    size="35%"
            >
            <div class="demo-drawer__content" id="editcontent">
                <el-form :model="editData" :rules="rules" ref="editData">
                     <el-form-item  style="margin-top: 130px" label="名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="editData.name" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="菜式分类" :label-width="formLabelWidth" prop="classify_name">
                        <el-select v-model="editData.classify_name " placeholder="菜式分类" >
                            <el-option disabled label="请选择" value=""  ></el-option>
                            <el-option label="热菜" value="热菜"></el-option>
                            <el-option label="凉菜" value="凉菜"></el-option>
                            <el-option label="汤羹" value="汤羹"></el-option>
                            <el-option label="主食" value="主食"></el-option>
                            <el-option label="小吃" value="小吃"></el-option>
                            <el-option label="酒水" value="酒水"></el-option>
                        </el-select>
                     </el-form-item>
                     <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
                        <el-input v-model="editData.price" autocomplete="on"></el-input>
                    </el-form-item>
                     <el-form-item label="图片路径" :label-width="formLabelWidth"  prop="imgsrc">
                        <el-input v-model="editData.imgsrc" autocomplete="on"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="菜品图片" :label-width="formLabelWidth">-->
<!--						<el-upload-->
<!--                                class="upload-demo"-->
<!--                                action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                                list-type="picture">-->
<!--							<el-button size="small" type="primary">点击选择</el-button>-->
<!--							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--						</el-upload>-->
<!--					</el-form-item>-->
                </el-form>
                <div class="demo-drawer__footer" id="footerdiv">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
            </span>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        props:['editData'],
        data() {
            return {
                value1:'',
                isShowBox: false,
                loading: false,
                formLabelWidth: '100px',

                rules: {
                    name: [
                        { required: true, message: '请输入菜名', trigger: 'blur' },
                        { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
                    ],
                    classify_name: [
                        { required: true, message: '请选择菜品类名', trigger: 'blur' },
                        { min: 1, max:15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入价格', trigger: 'blur' }
                    ] ,
                    imgsrc: [
                        { required: true, message: '请输入路径', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            modify1() {
                this.$notify.success({
                    title: '成功',
                    message: '编辑成功！',
                    offset:50
                });
            },
            modify2() {
                this.$notify.error({
                    title: '错误',
                    message: '网络出故障了，编辑失败，请稍后重试！'
                });
            },
            ...mapActions(['getCurrentDataA']),
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$refs.editData.validate((valid) => {
                    if(valid){
                        this.$confirm('确定要提交修改的表单吗？')
                            .then(_ => {
                                //在这里获取编辑之后的数据  操作数据库数据
                                // console.log(this.editData)
                                let data=this.editData
                                this.$axios({
                                    url: '/mgrsite/dishesMainController/editDishesMain',
                                    method: 'post',
                                    data: {data}
                                }).then(res => {
                                    // console.log(res.data.code)
                                    if (res.data.code == 200) {
                                        this.$emit('queren')
                                        this.loading = true;
                                        this.timer = setTimeout(() => {
                                            done();
                                            // 动画关闭需要一定的时间
                                            setTimeout(() => {
                                                this.loading = false;
                                            }, 200);
                                        }, 200);
                                        this.modify1()
                                    }
                                }).catch(err => {
                                    console.log(333)
                                    this.$emit('queren')
                                    this.modify2()
                                })
                            })
                            .catch(_ => {
                                console.log(222)
                                this.$emit('queren')
                            });
                    } else {
                        this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
                    }

                })

            },
            cancelForm() {
                this.$emit('queren')
                this.loading = false;
                this.isShowBox = false;
                clearTimeout(this.timer);
            }
        } ,
    }

</script>
<style scoped>
    #edit{
        margin-right: 20px;
    }
    .el-input{
        width: 300px;
    }
    #footerdiv{
        margin-left: 100px;
    }
</style>